一步步教你用html+div+css+js基于Jquery实现一套数字华容道游戏

最新推荐文章于 2024-06-11 11:06:57 发布

www.hp91.cn

最新推荐文章于 2024-06-11 11:06:57 发布

阅读量1.5k

点赞数 3

文章标签： html5 游戏 jquery

本文链接：https://blog.csdn.net/weixin_52308504/article/details/113615797

版权

游戏分析说起华容道游戏，可真的是经典游戏了，记得小时候有那种塑料的拼图板，能让人玩上一整天，有时候半天搞不定，光想给每个块块抠出来重新组上去，现在有电脑了，自己还是个从业多年的菜鸟程序员，是时候学习一下实现这个东西了。今天就先实现一下数字华容道。数字华容道，一般是正方形的，9宫格，16宫格，25宫格，总之横竖行数量一致。图形上来说：绘制地图绘制数字定位数字位置开始结束按钮计时显示结果展示逻辑上来说：初始化数字位置告知玩家成功的样子点击开始结束按钮触发事件，开始时乱序排序数字位置

摘要由CSDN通过智能技术生成

游戏分析

说起华容道游戏，可真的是经典游戏了，记得小时候有那种塑料的拼图板，能让人玩上一整天，有时候半天搞不定，光想给每个块块抠出来重新组上去，现在有电脑了，自己还是个从业多年的菜鸟程序员，是时候学习一下实现这个东西了。

今天就先实现一下数字华容道。数字华容道，一般是正方形的，9宫格，16宫格，25宫格，总之横竖行数量一致。

图形上来说：

绘制地图
绘制数字
定位数字位置
开始结束按钮
计时显示
结果展示

逻辑上来说：

初始化数字位置告知玩家成功的样子
点击开始结束按钮触发事件，开始时乱序排序数字位置开始计时，结束时停止计时，给出完成情况
移动数字，判断数字是否满足移动条件并进行移动
验证是否完成游戏

代码实现

先创建个.html文件引入jquery，设置样式，设置容器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>华容道</title>
 7     <script src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
 8 </head>
 9 <style>
10     .box {
   
11         width: 300px;
12         height: 300px;
13         border: 1px solid #ccc;
14         margin: 0 auto;
15         position: relative;
16     }
17 
18     .box .sz {
   
19         width: 90px;
20         height: 90px;
21         background: #ecc;
22         border: 2px #cec solid;
23         position: absolute;
24         font-size: 40px;
25         line-height: 90px;
26         text-align: center;
27     }
28 
29     .box .sz.kong {
   
30         border: 2px transparent solid;
31         background: transparent
32     }
33 
34     .btnbox {
   
35         text-align: center;
36         padding-top: 20px;
37     }
38 
39     .btnbox .time {
   
40         color: teal
41     }
42 
43     .btnbox .jieguo {
   
44         color: red
45     }
46     #btn {
   
47         text-align: center;
48         margin: 0 auto;
49     }
50 </style>
51 <body>    
52     <div class="box">
53     </div><!--游戏容器-->
54     <div class="btnbox">
55         <div class="time">0</div><!--计时展示区-->
56         <div class="jieguo"></div><!--结果展示区-->
57         <button id="btn"></button><!--开始结束按钮-->
58     </div>
59 </body>
60 </html>

开始正式的代码部分

1 $(function (k) {
   
  2             let state = false;

最低0.47元/天解锁文章

www.hp91.cn

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
一步步教你用html+div+css+js基于Jquery实现一套数字华容道游戏

游戏分析说起华容道游戏，可真的是经典游戏了，记得小时候有那种塑料的拼图板，能让人玩上一整天，有时候半天搞不定，光想给每个块块抠出来重新组上去，现在有电脑了，自己还是个从业多年的菜鸟程序员，是时候学习一下实现这个东西了。今天就先实现一下数字华容道。数字华容道，一般是正方形的，9宫格，16宫格，25宫格，总之横竖行数量一致。图形上来说：绘制地图绘制数字定位数字位置开始结束按钮计时显示结果展示逻辑上来说：初始化数字位置告知玩家成功的样子点击开始结束按钮触发事件，开始时乱序排序数字位置
复制链接

扫一扫